<template>
    <div class="header">
        <div class="logo">forest管理系统</div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <img class="user-logo" src="../../../static/img/img.jpg">
                    {{name}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                    <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-dialog title="修改密码" :visible.sync="editFormVisible">
            <el-form :model="editForm" :inline="true" :rules="rules" ref="editForm" label-position="right"
                     class="demo-form-inline">
                <el-form-item prop="oldPassword" label="请输入原密码：" :label-width="formLabeWidth">
                    <el-input type="password" v-model="editForm.oldPassword"></el-input>
                </el-form-item>
                <el-form-item prop="newPassword" label="请输入新密码：" :label-width="formLabeWidth">
                    <el-input type="password" v-model="editForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword" label="请再次输入新密码：" :label-width="formLabeWidth">
                    <el-input type="password" v-model="editForm.rePassword"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSubmitForm('editForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: "--",
                account: "",
                id: "",
                editFormVisible: false,
                formLabeWidth: '140px',
                editForm: {
                    oldPassword: "",
                    newPassword: "",
                    rePassword: ""
                },
                rules: {
                    oldPassword: [
                        {required: true, message: '请输入原密码', trigger: 'change'},
                    ],
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'change'},
                    ],
                    rePassword: [
                        {required: true, message: '请再次输入新密码', trigger: 'change'},
                    ]
                }
            }
        },
        created() {
            this.getLoginUser();
        },
        methods: {
            handleCommand(command) {
                const self = this;
                //退出
                if (command == 'loginout') {
                    self.$axios.get('/api/logout')
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                            self.message = error.response.data.msg;
                        });
                    self.$router.push('/login');
                }
                //修改个人密码
                if (command == 'editPassword') {
                    self.editFormVisible = true;
                }
            },
            //获取当前登录用户
            getLoginUser() {
                const self = this;
                self.$axios.get('/api/getLoginUser')
                    .then(function (response) {
                        console.log(response);
                        self.name = response.data.data.name;
                        self.account = response.data.data.account;
                    })
                    .catch(function (error) {
                        console.log(error);
                        self.message = error.response.data.msg;
                    });
            },
            //修改密码
            editSubmitForm(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$axios.post('/api/user/changePwd', self.editForm)
                            .then(function (response) {
                                console.log(response);
                                self.$message({
                                    message: "修改成功",
                                    type: 'warning'
                                });
                                self.editFormVisible = false;
                            })
                            .catch(function (error) {
                                console.log(error);
                                self.message = error.response.data.msg;
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>
<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 70px;
        color: #fff;
    }

    .header .logo {
        float: left;
        width: 250px;
        text-align: center;
    }

    .user-info {
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #fff;
    }

    .user-info .el-dropdown-link {
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
    }

    .user-info .user-logo {
        position: absolute;
        left: 0;
        top: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .el-dropdown-menu__item {
        text-align: center;
    }
</style>
